
<template>
  <div class="map_container">
    <div style="height:50px">
      实现空气质量效果
    </div>
    <div
      style="height:calc(100% - 50px)"
      ref="echart"
    ></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      let echart = this.$echarts.init(this.$refs.echart);
      let geojson = require('@/geojson/中国.json');
      this.$echarts.registerMap('chinaMap', geojson); //注意：这里使用的是【this.$echarts】
      //空气质量数组(注意：这里面的name要和json文件中的名称对应上)
      var airData = [
        { name: '北京', value: 39.92 },
        { name: '天津', value: 39.13 },
        { name: '上海', value: 31.22 },
        { name: '重庆', value: 66 },
        { name: '河北', value: 147 },
        { name: '河南', value: 113 },
        { name: '云南', value: 25.04 },
        { name: '辽宁', value: 50 },
        { name: '黑龙江', value: 114 },
        { name: '湖南', value: 175 },
        { name: '安徽', value: 117 },
        { name: '山东', value: 92 },
        { name: '新疆', value: 84 },
        { name: '江苏', value: 67 },
        { name: '浙江', value: 84 },
        { name: '江西', value: 96 },
        { name: '湖北', value: 273 },
        { name: '广西', value: 59 },
        { name: '甘肃', value: 99 },
        { name: '山西', value: 39 },
        { name: '内蒙古', value: 58 },
        { name: '陕西', value: 61 },
        { name: '吉林', value: 51 },
        { name: '福建', value: 29 },
        { name: '贵州', value: 71 },
        { name: '广东', value: 38 },
        { name: '青海', value: 57 },
        { name: '西藏', value: 24 },
        { name: '四川', value: 58 },
        { name: '宁夏', value: 52 },
        { name: '海南', value: 54 },
        { name: '台湾', value: 88 },
        { name: '香港', value: 66 },
        { name: '澳门', value: 77 },
        { name: '南海诸岛', value: 55 },
      ];
      let option = {
        geo: {
          type: 'map', //类型是地图
          map: 'chinaMap', //和[registerMap]中注册的保持一致
          roam: true, //允许鼠标拖动和缩放
          label: {
            show: true, //显示省名称
          },
          zoom: 1, //默认为1，即不放大，依次递增
          center: [116.407387, 39.904179], //设置地图中心点
        },
        series: [
          {
            geoIndex: 0, //绑定第0个geo
            type: 'map', //为series指明这是地图
            data: airData,
          },
        ],
        visualMap: {
          //给空气质量配置最小值和最大值
          min: 0,
          max: 300,
          inRange: {
            color: ['skyblue', 'red'], //颜色渐变设置
          },
          calculable: true, //两段可以拖拽，放大缩小
        },
      };
      echart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.map_container {
  height: 100%;
  padding: 15px;
}
</style>